<template>
    <fieldset>
        <legend>子组件</legend>
        <h1>子组件</h1>
        <h1>{{gift}}</h1>
        <h1>余额:{{balance}}</h1>
        <button @click="bet">点击下注</button>
    </fieldset>
</template>

<script setup>
//  使用defineProps来声明props属性

import { defineProps, toRefs ,ref,defineEmits,defineExpose} from 'vue';

 let props = defineProps({
    gift:{
        tpye:String
    }
 })

// 结构props中的属性，会消除他的响应性
// 使用toRefs让属性重新获取响应性
let {gift} =toRefs(props)

//  console.log(props);


//  子传父的过程

let balance = ref(1000252)

// 使用defineEmits来声明自定义事件

let emit = defineEmits('betMoney')

let bet = function (){
    balance.value = balance.value -10000
    emit('betMoney',10000)
}

// defineExpose 把子组件的方法和属性暴露给父组件
// 一般暴露方法给父组件,一些静态属性给父组件
defineExpose({
    balance,
    bet
})


throw new Error('您的余额不足，请充值')
</script>